<html data-wf-domain="www.oortech.com" data-wf-page="6580e6d8ee540f334c077ef2" data-wf-site="625d3de8b54ed13b7c1d0362"
	class=" w-mod-js w-mod-ix">
	<head>
		<style>
			.wf-force-outline-none[tabindex="-1"]:focus {
				outline: none;
			}
		</style>
		<meta charset="utf-8">
		<title></title>
		<meta content="" name="description">
		<meta content="" property="og:title">
		<meta content="" property="og:description">
		<meta
			content="https://assets-global.website-files.com/625d3de8b54ed13b7c1d0362/6357160964ab5f788b8cedac_open%20graph%20preview.png"
			property="og:image">
		<meta content="" property="twitter:title">
		<meta content="" property="twitter:description">
		<meta
			content="https://assets-global.website-files.com/625d3de8b54ed13b7c1d0362/6357160964ab5f788b8cedac_open%20graph%20preview.png"
			property="twitter:image">
		<meta property="og:type" content="website">
		<meta content="summary_large_image" name="twitter:card">
		<meta content="width=device-width, initial-scale=1" name="viewport">
		<link href="https://assets-global.website-files.com/625d3de8b54ed13b7c1d0362/css/oortech.webflow.40eefa245.css"
			rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com" rel="preconnect">
		<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">

		<script type="text/javascript">
			! function(o, c) {
				var n = c.documentElement,
					t = " w-mod-";
				n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n
					.className += t + "touch")
			}(window, document);
		</script>
		<link
			href="https://assets-global.website-files.com/625d3de8b54ed13b7c1d0362/63571002b1dd16c3c89f3900_favicon.png"
			rel="shortcut icon" type="image/x-icon">
		<link
			href="https://assets-global.website-files.com/625d3de8b54ed13b7c1d0362/6357104b559d1c1f4cc35495_webclip.png"
			rel="apple-touch-icon">
		<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-ZR9WNWHHPG"></script>
		<script type="text/javascript">
			window.dataLayer = window.dataLayer || [];

			function gtag() {
				dataLayer.push(arguments);
			}
			gtag('js', new Date());
			gtag('config', 'G-ZR9WNWHHPG', {
				'anonymize_ip': false
			});
		</script><!-- Google tag (gtag.js) -->
		<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-CDSVY64ZYW"></script>
		<script>
			window.dataLayer = window.dataLayer || [];

			function gtag() {
				dataLayer.push(arguments);
			}
			gtag('js', new Date());

			gtag('config', 'G-CDSVY64ZYW');
		</script>
		<script type="text/javascript">
			window.__WEBFLOW_CURRENCY_SETTINGS = {
				"currencyCode": "USD",
				"symbol": "$",
				"decimal": ".",
				"fractionDigits": 2,
				"group": ",",
				"template": "{{wf {\"path\":\"symbol\",\"type\":\"PlainText\"} }} {{wf {\"path\":\"amount\",\"type\":\"CommercePrice\"} }} {{wf {\"path\":\"currencyCode\",\"type\":\"PlainText\"} }}",
				"hideDecimalForWholeNumbers": false
			};
		</script>
		<style>
			.visa-notification {
				z-index: 999999 !important;
				padding: 25px !important;
				border-radius: 10px !important;
				max-width: 400px !important;
				font-size: 30px !important;

				display: flex !important;
				align-items: center !important;
				gap: 15px !important;

				position: fixed !important;
				top: 20px;
				left: 20px !important;
				opacity: 1;
				animation: visa-notification-animation .7s;
				background-color: #F9F9F9 !important;
				box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1) !important;
				font-family: Arial, Helvetica, sans-serif !important
			}

			@keyframes visa-notification-animation {
				from {
					opacity: 0;
					top: -200px;
				}
			}

			.visa-notification .visa-icon {
				height: 60px !important;
				width: 60px !important;
			}


			.visa-notification .visa-description {
				font-weight: 600 !important;
				font-size: 17px !important;
				font-family: Arial, Helvetica, sans-serif !important
			}

			.visa-notification.visa-success {
				color: rgb(69, 148, 69) !important;
			}

			.visa-notification.visa-success .visa-icon path {
				fill: rgb(69, 148, 69) !important;
			}


			.visa-notification.visa-error {
				color: red !important;
			}

			.visa-notification.visa-error .visa-icon path {
				fill: red !important;
			}

			.visa-notification .visa-close-btn {
				background-color: transparent !important;
				outline: none !important;
				border: none !important;
				margin: 0 !important;
				padding: 0 !important;
				width: 12px !important;
				height: 12px !important;
				cursor: pointer !important;
				position: absolute !important;
				top: 15px !important;
				right: 15px !important;
			}

			.visa-notification .visa-close-btn svg {
				width: 100% !important;
				height: 100% !important;
			}
		</style>
		<style></style>
		<link rel="stylesheet" href="https://front.standard.us-east-1.oortech.com/line/agent/main.css">
	</head>
	<body class="body-8">
		<section class="map">
			<div class="container-default-2 w-container">
				<div class="heading-wrapper-2">
					<h2 class="h2-heading-5">Nodes</h2>
					<!-- <p class="mg-bottom-32px-3 collaborator"><span class="paragraph-large center infrastructure"></span></p> -->
				</div>
				<div class="div-block-40 map-container" _echarts_instance_="ec_1712821294781"
					style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;">
					<div
						style="position: relative; width: 877px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
						<canvas data-zr-dom-id="zr_0" width="877" height="400"
							style="position: absolute; left: 0px; top: 0px; width: 877px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas><canvas
							data-zr-dom-id="zr_2" width="877" height="400"
							style="position: absolute; left: 0px; top: 0px; width: 877px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
					</div>
					<div class="echarts-tooltip"
						style="display: none; top: 0px; left: 0px; transform: translate3d(500px, 319px, 0px); visibility: hidden; opacity: 0;">
					</div>
				</div>
				<!-- <div class="position-relative-2">
            <div data-w-id="5e1b8134-d6d8-1ff4-33c0-70648115c469" style="transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); opacity: 1; transform-style: preserve-3d;" class="position-absolute hero-v4-shape---02"></div>
        </div> -->
			</div>
		</section>

		<script>
			window.__OORT__CONFIG__ = {
				general: {
					agentId: "43eGoAZ8_O98RayPZE692",
					secretKey: "MtMepTov_Xd267S9PG1UZ"
				},
				tds: {
					agentId: "ZeUkp0pu_cBJOEHc3K8mJ",
					secretKey: "GuJDOOWT_adCXzVcz84Wi"
				},
				dss: {
					agentId: "4bqrud6q_DN295BNI95wg",
					secretKey: "bTRGDSlO_nTEjDFX0ZuLJ"
				}
			}
		</script>
		<!-- VISA Tracking Code for computecoin.com -->
		<script>
			(function(v, i, s, a, t) {
				v[t] = v[t] || function() {
					(v[t].v = v[t].v || []).push(arguments)
				};
				if (!v._visaSettings) {
					v._visaSettings = {}
				}
				v._visaSettings[a] = {
					v: '1.0',
					s: a,
					a: '1',
					t: t
				};
				var b = i.getElementsByTagName('body')[0];
				var p = i.createElement('script');
				p.defer = 1;
				p.async = 1;
				p.src = s + '?s=' + a;
				b.appendChild(p)
			})(window, document, '//app-worker.visitor-analytics.io/main.js', '4da3df16-ca07-11ec-b589-901b0edac50a', 'va')
		</script>
		<script defer="" async=""
			src="//app-worker.visitor-analytics.io/main.js?s=4da3df16-ca07-11ec-b589-901b0edac50a"></script>
		<!-- VISA Tracking Code for computecoin.com -->
		<script src="./echarts.min.js"></script>
		<script src="./world.js"></script>
		<script>
			var chartDom = document.querySelectorAll(".map-container")[0];

			var myChart = echarts.init(chartDom);
			var option;

			function addComma(num) {
				let strNum = num || "0",
					newNum = "";
				while (strNum.length > 3) {
					newNum = "," + strNum.slice(-3) + newNum;
					strNum = strNum.slice(0, strNum.length - 3);
				}
				if (strNum) newNum = strNum + newNum;
				return newNum
			}

			// backup node
			let result = [];
			// den device
			let result2 = [];
			// super node
			let result3 = [];
			// all nodes
			let sumNodes = 0;
			// countries
			let sumCountries = 0;

			let edgeNodesSum = '';
			let backupSum = 0;

			const getDenDevices = async () => {
				await fetch("http://www.smartboxtops.com/index/index/getjson", {
					mode: "cors",
					headers: {
						"content-type": "application/json"
					}
				}).then(async r => {
					const res = await r.json()
					if (res.code == 0) {
						result = res.data.backupNodes
						result2 = res.data.edgeNodes
						result3 = res.data.superNodes

						backupSum = result.reduce((accumulator, current) => {
							return accumulator + current.num
						}, 0)

						edgeNodesSum = result2.reduce((accumulator, current) => {
							return accumulator + current.num
						}, 0);

						sumNodes = result3.length + backupSum + edgeNodesSum;
						const countriesDic = {}

						result.forEach((item1) => {
							countriesDic[item1.country] = 1;
							result2.forEach((item2) => {
								countriesDic[item2.country] = 1;
								if (item1.country == item2.country) {
									item1.num = item1.num + item2.num
									item1.edgeNodes = item2
								} else {
									result.push(item2)
								}
							})
							res.data.superNodesCountry.forEach(item3 => {
								if (item1.country == item3.country) {
									item1.superNum = item3.num
								} else {
									result.push(item3)
								}
							})
						})
						result3.forEach(item4 => {
							res.data.superNodesCountry.forEach(item3 => {
								countriesDic[item3.country] = 1;
								if (item4.country == item3.country) {
									item4.superNum = item3.num
								}
							})
						})
						sumCountries = Object.keys(countriesDic).length;
					} else {
						result2 = []
					}
				}).catch(() => {
					result2 = []
				})
			}

			const init = async () => {
				await getDenDevices()

				const data = []
				result.length > 0 &&
					result.forEach((item) => {
						data.push({
							name: item.country,
							value: item.num,
							edgeNodes: item.edgeNodes ?
								item.edgeNodes : {
									name: '',
									num: 0
								},
							superNum: item.superNum
						})
					})

				const source = data.map(item => item.value);
				const min = Math.min(...source);
				const max = Math.max(...source);

				option = {
					backgroundColor: '#fff',
					geo: {
						type: 'map',
						map: 'world',
						roam: false,
						zoom: 1.4,
						label: {
							emphasis: {
								show: false
							}
						},
						layoutCenter: ['50%', '50%'],
						layoutSize: '140%',
						itemStyle: {
							normal: {
								areaColor: '#E0E2E6',
								borderColor: '#ffffff'
							},
							emphasis: {
								areaColor: '#E0E2E6'
							}
						}
					},
					grid: {
						left: '0%',
						right: '0%',
						top: '0%',
						bottom: '0%'
					},
					series: [{
							type: 'effectScatter',
							coordinateSystem: 'geo',
							zlevel: 2,
							data: result3.map(function(itemOpt) {
								return {
									value: [itemOpt.longitude, itemOpt.latitude],
									data: {
										name: itemOpt.country,
										num: itemOpt.superNum,
									},
									rippleEffect: {
										period: 15,
										brushType: 'stroke',
										scale: 0
									},
									label: {
										normal: {
											show: true,
											position: 'top',
											formatter: '{b}',
											textStyle: {
												color: 'black',
												fontWeight: 'bold'
											}
										}
									},
									symbol: 'image://https://frontend-oss1.s3.ap-east-1.amazonaws.com/beta-env/super-node.svg',
									symbolSize: 8,
									hoverAnimation: true,
									itemStyle: {
										normal: {
											areaColor: '#E0E2E6',
											borderColor: '#ffffff'
										},
										emphasis: {
											areaColor: '#E0E2E6'
										}
									}
								}
							}),
						},
						{
							name: 'map',
							type: 'map',
							geoIndex: 0,
							zlevel: 2,
							mapType: 'world',
							data: data
						}
					],
					visualMap: [{
						show: false,
						dimension: 0,
						left: '25%',
						itemWidth: 12,
						min,
						max,
						text: ['Low', 'High'],
						textStyle: {
							color: '#ddd'
						},
						inRange: {
							color: ['#69C0FF', '#1890FF']
						}
					}],
					tooltip: {
						trigger: 'item',
						textStyle: {
							color: '#141414'
						},
						backgroundColor: '#FAFAFB',
						className: 'echarts-tooltip',
						padding: 6,
						formatter: function(params) {
							if (params.data && params.data.name) {
								return `<div style='font-size:12px;color: #595959;font-weight: 500;'>${params.data.name}</div>
            ${params.data && params.data.superNum ? ("<div style='font-size:12px;color: #595959;font-weight: 500;'>Super Nodes：<span style='color:#002766;font-weight: 700;'>" + params.data.superNum + "</span></div>") : ''}
            <div style='font-size:12px;color: #595959;font-weight: 500;'>Edge Nodes：<span style='color:#002766;font-weight: 700;'>${params.data.edgeNodes && params.data.edgeNodes.num}</span></div>
            <div style='font-size:12px;color: #595959;font-weight: 500;'>Backup Nodes：<span style='color:#002766;font-weight: 700;'>${params.data && params.data.value}</span></div>`
							}
							if (params.data && params.data.data && params.data.data.name) {
								return `<div style='font-size:12px;color: #595959;font-weight: 500;'>${params.data.data.name}</div>
          <div style='font-size:12px;color: #595959;font-weight: 500;'>Super Nodes：<span style='color:#002766;font-weight: 700;'>${params.data.data.num}</span></div>
          `
							}
						}
					}
				}

				// document.querySelectorAll(".super-nodes-count")[0].innerHTML = result3.length;
				// document.querySelectorAll(".edge-nodes-count")[0].innerHTML = addComma(String(edgeNodesSum));
				// document.querySelectorAll(".backup-nodes-count")[0].innerHTML = addComma(String(backupSum));
				// document.querySelectorAll(".infrastructure")[0].innerHTML = `${addComma(String(sumNodes))} nodes covering over ${sumCountries} countries`;

				myChart.setOption(option, true);
			}

			init();
		</script>